<template>
  <div class="banner">

    <div class="banner_content">

      <div class="header">
        <van-nav-bar
          title="易分"
          @click-left="onClickLeft"
          @click-right="onClickRight">
          <van-icon name="phone-o" slot="left" />
          <van-icon name="chat-o" slot="right" />
        </van-nav-bar>
      </div>

      <div style="width: 100%;height:30vh;">
        <van-swipe :autoplay="3000"
                   :loop="true"
                   style="width: 100%;height: 100%;">
          <van-swipe-item
            v-for="(banner, i) in banners"
            :key="i">
            <img v-lazy="banner.pic_url" style="height:100%;width:100%;" @click="to_banner_detail(banner.aId,banner.type)"/>
          </van-swipe-item>
        </van-swipe>
      </div>



      <div>
        <van-notice-bar
          background="#ffffff"
          color="#333333"
          :text="horseRaceLamps"
          left-icon="volume-o"
        />
      </div>



      <div style="background: #FFFFFF;padding-top: 2vh; padding-bottom: 1.2vh;" class="coollelt">
        <!--<van-grid :gutter="10" style="margin: 5px;">
          <van-grid-item icon="home-o" text="预约回收" @click="to_recycling"/>
          <van-grid-item icon="search" text="分类收集" url="/vant/mobile.html" />
          <van-grid-item icon="home-o" text="分类运输" to="/" />
          <van-grid-item icon="search" text="分类处理" url="/vant/mobile.html" />
        </van-grid>-->


        <div @click="to_recycling">
        	 <img src="../../assets/huishou.png" />
        	 <br />
        	 <span>预约回收</span>
        </div>


        <div @click="to_collect">
        	<img src="../../assets/fenlei.png" />
        	<br />
        	<span>分类收集</span>
        </div>

        <div @click="to_yunshu">
        	<img src="../../assets/yunshu.png" />
        	<br />
        	<span>分类运输</span>
        </div>


        <div @click="to_chuli">
        	<img src="../../assets/fenleichuli.png" />
        	<br />
        	<span>分类处理</span>
        </div>
      </div>

      <!--<div style="background: #FFFFFF;">


        <van-cell title="智能扫码投放" icon="shop-o">


            <van-icon
              slot="right-icon"
              name="search"
              style="line-height: inherit;"
            />
            <img src="../../assets/changeteacher.png"  style="height: 12px;"/>
          </van-cell>

     </div>-->




      <!-- <van-divider />-->
      <div style="background: #FFFFFF;">
         <!--我二维码跳转--->
         <div class="qrcode_img">
         	  <p>
         	  	<span class="Span_contnt"></span>
         	  	<span style="vertical-align: middle;font-size: 14px;">智能扫码投放</span>
         	  </p>

         	  <p>
         	  	<img src="../../assets/erweima.png" @click="qrcode_route_contet"/>
         	  </p>
         </div>
        <van-cell :title="equ.device_name" icon="location-o" @click="arrow_content" style="padding-top:1.1vh;padding-bottom: 1.1vh;" >

          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <van-icon

            slot="arrow"
            name="close"
            style="line-height: inherit;"
          />
          <!--约{{equ.distance}}KM-->
         <!-- {{equ.address}}-->
          <van-icon name="arrow" style="vertical-align: middle;" />
        </van-cell>

      </div>

      <div class="flex_shouye">
        <div
          v-for="(inner, i) in equ.inner_list"
          :key="i"
          >
          <div style="position: relative">
            <img src="../../assets/weixiu.png" v-show="inner.inner_status =='3'" style="right: -3px;position: absolute;width: 5vw;top: -6px;"/>
            <img src="../../assets/zanman.png" v-show="inner.inner_status =='2'" style="right: -3px;position: absolute;width: 5vw;top: -6px;"/>
            <img :src="inner.img_src" />
          </div>
          <p><span>{{inner.inner_type_name}}</span></p>
        </div>




      </div>

      <div class="title_content" style="margin-top: 1.2vh;">

        <!-- 	  <van-cell title="" icon="location-o" />-->
        <div class="flex_biaoti">
          <h4><span></span><span>环保积分</span></h4>
        </div>
        <div class="clear"></div>
        <div class="flex_shouye" id="felex_id" style="padding-top:0.8vh;padding-bottom: 0.8vh;">

          <div>
            <p style="color: #4C9FFD;">
              <span style="font-size: 20px">{{lei_ji_ji_fen | formatShow}}</span>
            </p>
            <p>
              <span  class="jife">累计积分</span>
            </p>
          </div>
          <div @click="ongolistmore">
            <p style="color: #4C9FFD;">
              <span style="font-size: 20px">{{can_yu_ci_shu}}</span>
            </p>
            <p>
              <span  class="jife">参与次数</span>
            </p>
          </div>

          <div>
            <span style="width: 0.3vw;
						    display: inline-block;
						    height: 100%;
						    background:#F6F6F6FF;"></span>
          </div>
          <div @click="to_shopall">
            <p>
              <img src="../../assets/shop.png" style="width:3.6vh;">
            </p>
            <p>
              <span class="jife">易分商城</span>
            </p>
          </div>

        </div>
      </div>




      <div class="flex_shouye" id="felex_idcon" style="padding-top: 1vh; padding-bottom: 1vh;" >
        <div>
          <img src="../../assets/tuer.png" />
        </div>





        <div style=" padding-top:0.5rem;">
          <p style="color: #4C9FFD;">
            <span style="color:#ffffff">平台累计收集</span>

          </p>
          <p style="margin-top:10px;">
            <span  class="jife" style="font-size:16px;">{{collect_amount}}</span><span>{{collect_unit}}</span>
          </p>
        </div>

        <div class="shou_xian">
        </div>

        <div>
          <img src="../../assets/tu.png" />
        </div>
        <div style=" padding-top:0.5rem;">

          <p>
            <span>平台累计处理</span>

          </p>
          <p style="margin-top:10px;">
            <span class="jife" style="font-size:16px;">{{dispose_amount}}</span><span>{{dispose_unit}}</span>
          </p>
        </div>

      </div>
      <div class="fles_di" style="height:8vh;"></div>
    </div>





    <div>
      <ban-veriFy></ban-veriFy>
      <!--<van-tabbar v-model="tabBarSelected">

        <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item name="setting" icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>-->
    </div>
  </div>

</template>
<script>
    import wx from 'weixin-js-sdk'
    import {Toast} from 'vant'
    import BanVeriFy from '@/components/BanVeriFy';
    import { Dialog } from 'vant';
    export default {
        data() {
            return {


                user:'',
                phone:'',
                banners:[],
                horseRaceLamps:'',
                collect_amount:'',
                collect_unit:'',
                dispose_amount:'',
                dispose_unit:'',
                equ:'',
                taBarContent:'',
                tabBarSelected:'home',
                center: [121.59996, 31.197646],
                lei_ji_ji_fen:0,
                can_yu_ci_shu:0
            }
        },
        watch:{
            tabBarSelected(value){
                console.log(value);
                this.taBarContent = value + '_c';
                console.log(this.taBarContent);
            }
        },
        filters:{

            formatShow(intgral){
                console.log(intgral);
                console.log(9999999);
               if(intgral>=9999999){
                   return intgral.toString().substring(0,4)+"w"
               }else{
                   return intgral;
               }
            }


        },

        mounted:function(){

            let local_user = localStorage.getItem('user');
            if(local_user != undefined && local_user != "undefined"){
                let user = JSON.parse(local_user);
                this.get_user_info(user.userId);
                this.get_interal(user.userId);
            }

            this.index_datas();
            this.get_equ();

        },
        methods:{
            /*wxRegister() {
                // 这边的接口请换成你们自己的

                const that = this;
                that.$sendRequest('/wechat/get_auth',"").then(function(res){
                    console.log(res);
                    if(res.data.code ==0){
                        wx.config({
                            debug: false, // 开启调试模式
                            appId: res.data.result.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.result.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.data.result.nonceStr, // 必填，生成签名的随机串
                            signature: res.data.result.signature, // 必填，签名，见附录1
                            jsApiList: [
                                'openLocation'
                            ]
                        })
                    }
                })


                wx.ready((res) => {
                    wx.getLocation({
                        success: function (res) {
                            console.log(res);
                            console.log(res.longitude);
                            console.log(res.latitude);

                        },
                        cancel: function (res) {
                            alert('用户拒绝授权获取地理位置');
                        }
                    });
                })
            },*/

            ongolistmore(){
              this.$router.push({
                path:'/listmore'
            })
          },
            get_interal(userId) {
                const that = this;
                that.$sendRequest("/index/get_interal", "userId=" + userId)
                    .then(function(res) {
                        console.log(res);
                        if (res.data.code == 0) {
                            that.lei_ji_ji_fen = res.data.result.accumulateIntegral;
                            that.can_yu_ci_shu = res.data.result.participantsCount;
                        }
                    });
            },
            to_shopall(){
              this.$router.push({
                path:'/shopall'
              })
            },
            to_collect(){
                if(this.user ==''){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行登录'
                    }).then(() => {
                        // on confirm
                        this.$router.push({
                            path:'/'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }
                if(this.user.realAuthState != '2.1' && this.user.realAuthState != '2.2'){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行实名认证'
                    }).then(() => {
                        this.$router.push({
                            path:'/Authenticaperson'
                        })
                    }).catch(() => {
                    });
                }else{
                    if(this.user.func.indexOf("0") >-1){
                        this.$router.push({
                            path:'/collect'
                        })
                    }else{
                        this.$toast("您没有此权限");
                    }

                }
            },
            to_yunshu(){
                if(this.user ==''){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行登录'
                    }).then(() => {
                        // on confirm
                        this.$router.push({
                            path:'/'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }
                if(this.user.realAuthState != '2.1' && this.user.realAuthState != '2.2'){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行实名认证'
                    }).then(() => {
                        this.$router.push({
                            path:'/Authenticaperson'
                        })
                    }).catch(() => {
                    });
                }else{
                    if(this.user.func.indexOf("0") >-1){
                        this.$router.push({
                            path:'/fenLeiYunShu'
                        })
                    }else{
                        this.$toast("您没有此权限");
                    }

                }
            },
            to_chuli(){
                if(this.user ==''){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行登录'
                    }).then(() => {
                        // on confirm
                        this.$router.push({
                            path:'/'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }
                if(this.user.realAuthState != '2.1' && this.user.realAuthState != '2.2'){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行实名认证'
                    }).then(() => {
                        this.$router.push({
                            path:'/Authenticaperson'
                        })
                    }).catch(() => {
                    });
                }else{
                    if(this.user.func.indexOf("0") >-1){
                        this.$router.push({
                            path:'/fenLeiChuLi'
                        })
                    }else{
                        this.$toast("您没有此权限");
                    }
                }
            },
            get_user_info(userId){
                const that = this;
                that.$sendRequest('/login/get_user_info',"userId="+userId).then(function(res){
                    console.log(res);
                    if(res.data.code ==0){
                        localStorage.setItem('user', JSON.stringify(res.data.result.user));
                        let user = JSON.parse(localStorage.getItem('user'));
                        that.user = user;
                    }
                })
            },
            to_recycling(){
                console.log(this.user);
                if(this.user ==''){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行登录'
                    }).then(() => {
                        // on confirm
                        this.$router.push({
                            path:'/'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }
                if(this.user.realAuthState != '2.1' && this.user.realAuthState != '2.2'){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行实名认证'
                    }).then(() => {
                        // on confirm
                        console.log(1);
                        this.$router.push({
                            path:'/Authenticaperson'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                }else{
                    this.$router.push({
                        path:'/recycling'
                    })
                }


            },
        	  qrcode_route_contet(){
                console.log(this.user);
                if(this.user ==''){

                    Dialog.confirm({
                        title: '',
                        message: '请您先进行登录'
                    }).then(() => {
                        // on confirm
                        this.$router.push({
                            path:'/'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }
              if(this.user.realAuthState == '2.1' || this.user.realAuthState == '2.2'){
                  this.$router.push({
                      path:'/qrcode',
                      query:{captcha:this.user.captcha}
                  })

              }else if(this.user.realAuthState == '1'){
                  this.$toast("您的资料在审核中,通过后即可扫码投放");
                  return false;
              }else if(this.user.realAuthState == '3'){
                  this.$toast("您的资料审核失败,请重新认证");
                  return false;
              }else if(this.user.realAuthState =='0'){
                  Dialog.confirm({
                      title: '',
                      message: '请您先进行实名认证'
                  }).then(() => {
                      // on confirm
                      console.log(1);
                      this.$router.push({
                          path:'/Authenticaperson'
                      })
                  }).catch(() => {
                      // on cancel
                  });

              }
        	},

         arrow_content(){
            console.log(JSON.stringify(this.equ))

	            this.$router.push({
                  path:'/city',
                  query:{equ:JSON.stringify(this.equ)}
	            })

          },
            onClickLeft() {
                const that = this;
                Dialog.alert({
                    closeOnClickOverlay:true,
                    message: that.phone
                }).then(() => {
                    window.location.href = 'tel:' + that.phone
                });
            },
            onClickRight() {

                if(this.user ==''){
                    Dialog.confirm({
                        title: '',
                        message: '请您先进行登录'
                    }).then(() => {
                        // on confirm
                        this.$router.push({
                            path:'/'
                        })
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }
                this.$router.push({
                    path:'/infomessage',
                    query:{userId:this.user.userId}
                })
            },
            get_equ(){
                const that = this;
                that.$sendRequest('/index/get_equ',"type=0&lon=&lat=").then(function(res){
                    console.log(res.data);
                    if(res.data.code == 0){
                        //that.equ = res.data.result.equs[0];
                        let e = res.data.result.equs[0];
                        let inner_list = e.inner_list;
                        for(var i = 0;i<inner_list.length;i++){
                          if(inner_list[i].inner_type=='401'){

                              inner_list[i].img_src =require("../../assets/zhilei.png")
                              inner_list[i].unit = "kg";
                          }else if(inner_list[i].inner_type=='402'){
                              inner_list[i].img_src = require("../../assets/jinshu.png");
                              inner_list[i].unit = "kg";
                          }else if(inner_list[i].inner_type=='403'){
                              inner_list[i].img_src = require("../../assets/01.png");
                              inner_list[i].unit = "kg";
                          }else if(inner_list[i].inner_type=='404'){
                              inner_list[i].img_src = require("../../assets/boli.png");
                              inner_list[i].unit = "次";
                          }else if(inner_list[i].inner_type=='408'){
                              inner_list[i].img_src = require("../../assets/408.png");
                              inner_list[i].unit = "kg";
                          }else if(inner_list[i].inner_type=='416'){
                              inner_list[i].img_src = require("../../assets/suliaoping.png");
                              inner_list[i].unit = "个";
                          }
                        }
                        that.equ = e;

                    }
                })
            },
            to_banner_detail(aId,type){
               let that = this;
                if(type == '1'){
                    that.$router.push({
                        path: '/h5',query:{url:"/h5/banner_detail?aId="+aId}
                    })
                }

            },
            index_datas(){
                const that = this;
                that.$sendRequest('/index/banners',"").then(function(res){
                    console.log(res.data);
                    if(res.data.code ==0){
                        that.phone = res.data.result.telephone.phone;
                        that.banners = res.data.result.banners;
                        let horses = res.data.result.horseRaceLamps;
                        let v_horses="";
                        for(var i = 0;i<horses.length;i++){
                            v_horses+="[ "+horses[i].content+" ]  ";
                        }
                        that.horseRaceLamps = v_horses;
                        that.collect_amount=res.data.result.platform.collect_amount;
                        that.collect_unit=res.data.result.platform.collect_unit;
                        that.dispose_amount=res.data.result.platform.dispose_amount;
                        that.dispose_unit=res.data.result.platform.dispose_unit;
                    }

                })
            }
        },
        components: {
            BanVeriFy

        }
    }
</script>
<style scoped="scoped">

.clear{
  clear: both;
}
.shou_xian{
  width: 0;
  height: 7.7vh;
  border: 0.5px solid #fff;
}
.coollelt img{
 	width: 60%;
 	height: 68%;
 }
 .banner{
	height: 100vh;
}
.banner_content{
	height: 100%;
}
.banner >>> .van-nav-bar{
  background-color: rgba(255, 255, 255, 0);
  position:fixed;
  width: 100%;
  top: 0;
  border:none;
}
.banner >>> .van-nav-bar__title{
	color:rgba(255, 255, 255, 0);
}
.banner >>> .van-nav-bar__left{
	font-size: 3vh;
  left: 4vw;
  color: #fff;
}
.banner >>>.van-nav-bar__right{
  right: 4vw;
	font-size: 3vh;
}
.van-icon-phone-o{
  color: #000;
}
.van-icon-chat-o{
  color: #000;
}
 .qrcode_img{
 	display: flex;
 	justify-content: space-between;
 	margin-left: 2vh;
 	margin-right: 2vh;
 	border-bottom: 1px solid #F6F6F6;
 }
 .qrcode_img img{
 	  width: 5vw;
 }
 .banner >>> .van-cell__title{
 	text-align: left;
 }
 .Span_contnt{
 	width: 0.5vw;
 	height: 3vh;
 	display: inline-block;
 	vertical-align: middle;
 	background: #4C9FFD;
 }
 .banner >>> .van-grid-item__content{
 	padding: 6px 6px !important;
 }
 .qrcode_img{
 	height: 5vh;
 	line-height: 5vh;
 }
 .qrcode_img img{
 	vertical-align: middle;
 }
  .jife{
    color: #999999;
    font-size: 12px;
  }
  .banner{
    background: #F6F6F6;
  }
  .coollelt{
  	display: flex;
  	padding: 5vw;
  	padding-bottom: 3vw;
  	justify-content: space-between;
  }
  .coollelt div{
  	text-align: center;
  }
  .coollelt div span{
  	font-size: 13px;
  }
  .coollelt >>> [class*=van-hairline]::after{
    border:none;
  }
  .coollelt>>>.van-icon-home-o:nth-child(1){
    background: #4C9FFD;
    border-radius: 50%;
    color: #FFFFFF;
    padding: 12px;
  }
  .flex_shouye{
    display: flex;
    justify-content: space-around;
    background: #FFFFFF;
    padding: 2vw;

  }
  #felex_idcon{
    background: #4C9FFD;
    color: #FFFFFF;
  }



  #felex_idcon .jife{
    color: #FFFFFF;
  }
  #felex_idcon  div img{
    margin-top: 2vh;
  }
  .flex_shouye div img{
    /* margin-top: 1vh; */
    width: 9vw;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .flex_shouye span{
    font-size: 12px;
  }
  .flex_biaoti{
    background-color: #fff;
  }
  .flex_biaoti h4{
    margin: 0;
    padding: 0.4rem 0.8rem;
    text-align: left;
    background-color: #fff;
    font-size: 14px;
    height: 3.2vh;
    font-weight: normal;
  }
  .flex_biaoti h4 span:first-child{
    width: 0.5vw;
    height: 3.2vh;
    display: inline-block;
    vertical-align: middle;
    /* width: 0.27vh;
    height: 3.2vh;
    display: inline-block; */
    background-color: rgb(253, 226, 148);
    float: left;
  }
  .flex_biaoti h4 span:nth-child(2){
    padding-left: 0.3rem;
    line-height: 3.5vh;
    display: inline-block;
    float: left;
  }
  [class*=van-hairline]::after{
    border: none;
  }
</style>

